<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<title>弹性盒子 Flex</title>
		
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			
			}
			.box{
				width: 100%;
				height: 500px;
				border: 5px solid deepskyblue;
				box-sizing: border-box;
				font-size: 40px;
			}
			.son{
				width: 150px;
				text-align: center;
				/*flex:1;*/
			}
			.son1{
				height: 150px;
				background:deeppink;
				order: 5;
				/*flex-shrink: 2;*/
			}
			.son2{
				height: 100px;
				background:orangered;	
				align-self: flex-start;
				/*flex-shrink: 1;*/		
			}
			.son3{
				height:50px;
				background:darkcyan;
				/*flex-grow: 3;*/
			}
			.flex{
				display: -webkit-flex;
				display: flex;
				/*flex-wrap: wrap;
				flex-direction: row-reverse;*/
				flex-flow:row wrap ;
				justify-content: flex-start;
				align-content: stretch;
				align-items:baseline;
			}
		</style>
	</head>
	<body>
		<!--
			1.父元素设置弹性盒子，作用在***直属子元素***上
			2.子元素的float/clear/vertical-align  不起作用
			3.flex属性默认为none  （flxe-shrink:1 ; flex-grow:0;）
				flex为0时，宽度由内容撑开（和inline类似）
				flex为非0时，按照比例分配父元素宽度
			4.flex-grow,父元素宽度的剩余部分按比例划分增加给子项
			5.flex-shrink,（父元素宽度 - 子项总宽度） * （自己shrink/总shrink） ,
			表示子项减少的宽度的比例
			6.flex-flow: flex-direction(排列方向) + flex-warp（换行）
			7.justify-content水平对齐，center（居中）、space-betweem｛分配剩余空间，两端不留白｝、
				space-around(分配剩余空间，两端留白)
			8.align-content多条交叉轴对齐，默认值stretch（子项不设置高度时，子项的高度自动拉伸）
			9.align-items一行内的垂直对齐，baseline基线对齐
			10.align-self 单独设置子项的垂直对齐方式
			11.order 权值，默认为0，可以设置负值，权值越大，排列在越后
		-->
		<!--<div class="box flex">
			<div class="son son1">
				1
			</div>
			<div class="son son2">
				2
			</div>
			<div class="son son3">
				3
			</div>
		</div>
		-->
		
		<style type="text/css">
			.searchBar{
				display: flex;
				border:2px solid #FF4500;
				
			}
			.searchBar input[type="text"]{
				flex: 1;
			}
		</style>
		
		
		<div class="searchBar">
			<input type="text" />
			<button>提交</button>
		</div>
	</body>
</html>
